<template>
	<view class="list">
		<view class="header">
			<view class="hd">
				<image mode="aspectFill" src="@/static/img/add-icon.png" class="add-icon" @click="toPage"></image>
				<span>创建发送通知</span>
				<view class="search">
					<image mode="scaleToFill" src="@/static/img/search.png"></image>
					<input type="text" placeholder="姓名" placeholder-style="color:#fff" v-model="name" @focus="nameInput('first')" @confirm="nameInput">
					<view class="selectBox" v-if="screenArr.length > 0">
						<view class="uni-list">
							<view  @click="comSearch('all')">全部</view>
							<view  v-for="(item, index) in screenArr" :key="item.value" @click="comSearch(item)">{{item.realName}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-swipe-action v-if="list.length > 0">
			<view class="content">
				<view class="list-item" v-for="(item,index) in list" :key="index" >
					<uni-swipe-action-item :right-options="options"  @click="bindClick(item)">
						<view class="list-item-left" :style="{background:randomRgbaColor(index)}" @click="jump(item)">{{item.realName}}</view>
						<view class="list-item-right" @click="jump(item)">
							<view class="info">
								<p v-for="(label,labelindex) in listLabel" :key="labelindex">{{item[label.key]}}</p>
							</view>
							<span class="title">{{item.status == 2 ? filterData2(item.updateTime) : filterData2(item.createTime)}}</span>
						</view>
					</uni-swipe-action-item>
				</view>
			</view>
		</uni-swipe-action>
		<view class="tab">
			<span :class="tabType == 2?'on':''" @click="tabChange(2)">已发送<em></em></span>
			<span :class="tabType == 4?'on':''" @click="tabChange(4)">草稿箱<em></em></span>
		</view>
		<view class="nulldata" style="text-align: center;font-size: 26upx;color: #ccc;padding-bottom: 20upx;" v-if="nullData">
			<view>没有更多数据了</view>
		</view>
		<view class="noneChating" v-if="list.length <= 0">
			<image src="@/static/img/headFeature/chattingNone.png"></image>
			<view>暂无数据</view>
		</view>
		<u-modal v-model="showModal" :show-cancel-button="true" @confirm="Modalconfirm" :content="showContent"></u-modal>
	</view>
</template>
<script>
	import {filterData2} from '@/static/js/filter.js'
	export default{
		data(){
			return {
				tabType: 2,
				list:[],
				listLabel:[
					{
						key:'noticeTitle'
					},
				],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#EE2437' // 删除按钮背景  红的
					}
				}],
				showModal:false,
				showContent:'',
				name:'',
				screenArr:[],
				nullData:false,
				page:1,
				SearchuserId:''
			}
		},
		onLoad() {
			this.getlist({pageIndex:1,pageSize:10,status:2,userId:this.SearchuserId})
		},
		methods:{
			comSearch(e){
				this.page = 1
				this.SearchuserId = e == 'all'? '' : e.userId
				this.nullData = false
				this.name = e == 'all'?'全部': e.realName
				this.screenArr = []
				this.deleteList = 1
				this.getlist({pageIndex:this.page,pageSize:10,userId:this.SearchuserId,status:this.tabType})
			},
			onReachBottom(){
				if(this.nullData == true){
					return;
				}
				this.page = this.page + 1
				this.getlist({pageIndex:this.page,pageSize:10,userId:this.SearchuserId,status:this.tabType})
			},
			nameInput(e){
				const data =  {str:e == 'first'?'':e.detail.value}
				this.$api.selectMembershipList(data).then((res) => {
					if(res.data.returnCode == 200) {
						this.screenArr = res.data.result.list;
					}
				})
			},
			filterData2,
			tabChange(e){
				this.tabType = e
				this.list = []
				this.page = 1;
				this.nullData = false
				this.getlist({pageIndex:1,pageSize:10,status:e,userId:this.SearchuserId})
			},
			getlist(data){
				this.$api.messageNoticelist(data).then((res)=>{
					if(this.deleteList == 1){
						this.list = res.data.result && res.data.result.list
						this.deleteList = ''
					}else{
						this.list = this.list.concat(res.data.result && res.data.result.list)
						if(this.list.length >= res.data.result.totalCount){
							this.nullData = true;
						}
					}
				})
			},
			toPage(){
				uni.navigateTo({
					url: '/pages/quickly/notice/addnotice'
				})
			},
			randomRgbaColor(index) {
				var textcolor = ['#04D68F','#FF9869','#7079EA','#D17BE5'];
				var a = index < 3 ? textcolor[index] : textcolor[index%4] ;  
				return a; //返回rgba(r,g,b,a)格式颜色
			},
			jump(item){
				uni.navigateTo({
					url: '/pages/quickly/notice/addnotice?id='+item.id+'&status='+item.status
				})
			},
			bindClick(item){
				this.showModal = true
				this.showContent = '是否确定删除通知？'
				this.delItem = item
			},
			Modalconfirm(){
				this.$api.messageNoticeDelete(this.delItem.id).then((res)=>{
					if(res.data.returnCode == 200){
						uni.showToast({
							title:'删除成功',
							icon:'none'
						})
						this.getlist({pageIndex:1,pageSize:10,status:this.tabType,userId:this.SearchuserId})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.list{
		min-height: calc(100vh - 88upx);
		background: #f8f8f8;
	}
	.header{
		width: 100vw;
		padding:22upx 24upx 26upx;
		background: #38CB97;
		position: fixed;
		top:88upx;
		z-index: 10;
		.hd{
			display: flex;
			align-items: center;
			.add-icon{
				width: 82upx;
				height: 82upx;
				margin-right: 36upx;
			}
			span{
				flex:1;
				font-size: 36upx;
				color: #fff;
			}
			.search{
				width: 168upx;
				height: 48upx;
				background: rgba(255,255,255,.25);
				display: flex;
				align-items: center;
				image{
					width: 22upx;
					height: 22upx;
					margin-left: 17upx;
					margin-right: 13upx;
				}
				input{
					font-size: 22upx;
					flex:1;
					height: 48upx;
					color: #fff;
				}
			}
		}
		
	}
	.tab{
		width: 100vw;
		height: 90upx;
		background: #fff;
		border-radius: 0 0 40upx 40upx;
		box-shadow: 0px 8upx 20upx 0px rgba(226, 226, 226, 0.3);
		position: fixed;
		top: 218upx;
		display: flex;
		span{
			flex:1;
			text-align: center;
			line-height: 90upx;
			font-size: 30upx;
			color: #999;
			position: relative;
			&.on{
				font-size: 36upx;
				color: #38CB97;
				em{
					position: absolute;
					width: 60upx;
					height: 3upx;
					background: #38CB97;
					display: block;
					bottom: 0;
					left: 50%;
					margin-left: -30upx;
				}
			}
		}
	}
	.list{
		&-item{
			width: 94vw;
			display: flex;
			align-items: center;
			background: #fff;
			margin: 0 auto 24upx;
			border-radius: 12upx;
			height: 200upx;
			.uni-swipe{
				width: 100%;
			}
			&-left{
				margin-left: 24upx;
				width: 100upx;
				height: 100upx;
				text-align: center;
				line-height: 100upx;
				color: #fff;
				margin-right:38upx;
				border-radius: 8upx;
				font-size: 26upx;
			}
			&-right{
				margin-right: 24upx;
				flex:1;
				display: flex;
				padding:37upx 0 46upx 0;
				.info{
					flex:1;
					p:nth-child(1) {
						font-weight: bold;
					}
					p{
						margin-top: 8upx;
						max-width: 486upx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
				.title{
					color: #999;
				}
				.status{
					font-size: 26upx;
					&.not-active{
						color: #1A85E9;
					}
					&.active{
						color: #38CB97;
					}
				}
			}
		}
	}
	.content{
		margin-top: 220upx;
		padding-top: 25upx;
	}
	.uni-swipe{height: 200upx;}
	/deep/ .uni-swipe_box{
		display: flex;
		align-items: center;
		height: 200upx;
	}
	
	.noneChating {
		padding-top: 420upx;
		image {
			display: block;
			margin: 0 auto;
			width: 260upx;
			height: 154upx;
		}
		view {
			margin: 24px auto;
			text-align: center;
			color: #333333;
			font-size: 13px;
		}
	}
	.selectBox {
		position: absolute;
		right: 20upx;
		top: 124upx;
		width: 88px;
		max-height: 564rpx;
		z-index: 10;
		background: #fff;
		box-shadow:0px 0px 20rpx -2rpx #bdbdbd;
		border-radius: 8upx;
		view{
			padding:4rpx 10rpx;
			overflow: hidden;
			font-size: 26upx;
			line-height: 48rpx;
		}
		.uni-list-cell {
			display: flex;
		}
	}
</style>
